<template>
    <div class="edit-config-modal relative" ref="editAddModal">
        <a-modal 
            v-model:open="state.isShow" 
            width="500px" 
            wrapClassName="custom-modal"
            :bodyStyle="{ height: '280px', overflowY: 'overlay', overflowX: 'hidden', paddingRight: '6px' }"
            :title="state.formState.id && state.formState.id > 0 ? '编辑项目' : '添加项目'" 
            cancelText="取消"
            okText="确定" 
            :getContainer="() => $refs.editAddModal" 
            @ok="handleOk" 
            @cancel="handleCancel"
        >
            <a-form ref="formRef" :model="state.formState" name="role-edit-form" autocomplete="off"
                :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                <a-spin :spinning="state.loading">
                    <a-row>
                        <a-col :span="24">
                            <a-form-item 
                                label="项目名称" 
                                name="projectName" 
                                :rules="[{ required: true, message: '项目名称不能为空', trigger: 'blur' }, { max: 64, message: '项目名称最大长度为64', trigger: 'blur' }]"
                            >
                                <a-input v-model:value="state.formState.projectName" placeholder="请输入项目名称" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item 
                                label="项目描述" 
                                name="remark"
                                :rules="[{ max: 128, message: '项目描述最大长度为128', trigger: 'blur' }]"
                            >
                                <a-textarea 
                                    v-model:value="state.formState.remark" 
                                    placeholder="请输入项目描述"
                                    :rows="3" 
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="状态" name="status">
                                <a-radio-group v-model:value="state.formState.status">
                                    <a-radio :value="1">启用</a-radio>
                                    <a-radio :value="2">禁用</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="是否模板" name="isTemplate">
                                <a-radio-group v-model:value="state.formState.isTemplate">
                                    <a-radio :value="1">是</a-radio>
                                    <a-radio :value="2">否</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="是否发布" name="isPublish">
                                <a-radio-group v-model:value="state.formState.isPublish">
                                    <a-radio :value="1">是</a-radio>
                                    <a-radio :value="2">否</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-spin>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'ant-design-vue';
import { emitter, showMsg } from '@/utils';
import { apiDataViewProjectAddPost,apiDataViewProjecUpdatePost } from '@/api/dataview/project';


const formRef = ref<FormInstance>();
const state = reactive({
    isShow: false,
    loading: false,
    formState: {
    } as any
});

const handleOk = async() => {
    await formRef.value?.validate();
    if(state.formState.id && state.formState.id > 0) {
        await apiDataViewProjecUpdatePost(state.formState);
    }else{
        await apiDataViewProjectAddPost(state.formState);
    }
    showMsg("操作成功",'success');
    handleCancel();
    // 触发项目列表更新
    emitter.emit('project-search');
}

const handleCancel = () => {
    state.isShow = false;
    state.formState = {
    };
}

const handleOpen = (val:any) => {
    state.isShow = true;
    state.formState = val
}

defineExpose({
    handleOpen,
});
</script>

<style lang="scss" scoped>
:deep(.ant-form-item) {
    margin-bottom: 20px;
}

:deep(.anticon.anticon-caret-down) {
    display: inline-flex;
}

:deep(.ant-tree-checkbox) {
    margin-block-start: 0;
}

:deep(.ant-input-group-addon){
    padding:0;
}
</style>